<template>
    <view class="container">
        <!-- 主体内容 -->
        <view class="main-top">
            <view class="title-section">
                <text class="main-title">更加真实</text>
                <text class="sub-title">更受欢迎</text>
                <view class="security-desc">
                    <text class="desc-text">1.请确认您的身份信息</text>
                    <text class="required-text">*以保障您的资金账户安全</text>
                </view>
            </view>
            <view>
            </view>

        </view>
        <view class="main-content">
            <!-- 输入区域 -->
            <view class="input-section">
                <view class="input-item required">
                    <text class="star">*</text>
                    <u-input v-model="formData.realName" placeholder="请输入真实姓名" placeholder-color="#999"
                        :border="inputBorder" />
                </view>
                <view class="input-item required">
                    <text class="star">*</text>
                    <u-input v-model="formData.idCardNo" placeholder="请输入身份证号码" placeholder-color="#999" type="idcard"
                        :border="inputBorder" />
                </view>

                <view style="display: flex; align-items: center;justify-content: center;" @click="getAddList">
                    <button>提交</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import my from "@/api/my.js";
    import col from '../../uni_modules/uview-ui/libs/config/props/col';

    export default {
        data() {
            return {
                formData: {
                    realName: '',
                    idCardNo: '',
                }
            };
        },

        methods: {
            getAddList() {
                console.log(7777)
                my.updateUserId(this.formData).then((res) => {
                    console.log(res.data)
                    if (res.code == 200) {
                        console.log(res)
                        uni.showToast({
                            title: "保存成功！",
                            icon: "none",
                        });
                        setTimeout(() => {
                            uni.navigateBack();
                        }, 1500);
                    }
                }).catch((erro) => {
                    console.log(erro)
                })
            },

        },
        onLoad() {
            // this.getAddList();
        },
    };
</script>

<style lang="scss" scoped>
    .container {
        min-height: 100vh;
        background: linear-gradient(135deg, #e6f2ff, #bae6fd);
    }

    .main-content {
        padding: 40rpx 30rpx 80rpx;
    }

    .main-top {
        padding-top: 100rpx;
        padding-bottom: 70rpx;
        background: linear-gradient(top, #2781FF, transparent);
    }

    .title-section {
        margin-bottom: 60rpx;
        text-align: center;
        color: #fff;

        .main-title {
            font-size: 40rpx;
            font-weight: bold;
            margin-bottom: 10rpx;
        }

        .sub-title {
            font-size: 32rpx;
            opacity: 0.9;
            margin-bottom: 30rpx;
        }

        .security-desc {
            padding: 24rpx 30rpx;
            border-radius: 16rpx;

            .desc-text {
                font-size: 28rpx;
                display: block;
                margin-bottom: 10rpx;
            }

            .required-text {
                font-size: 24rpx;
                color: #fff;
            }
        }
    }

    .input-section {
        background: rgba(255, 255, 255, 0.9);
        padding: 40rpx;
        border-radius: 20rpx;
        backdrop-filter: blur(10rpx);

        .input-item {
            position: relative;
            margin-bottom: 40rpx;

            .star {
                position: absolute;
                left: 30rpx;
                top: 50%;
                transform: translateY(-50%);
                color: #ff3b30;
                font-size: 28rpx;
            }
        }

        button {
            width: 300rpx;
            background-color: #2781FF;
            color: #fff;
            border-radius: 20rpx;
        }
    }

    /* uView组件样式覆盖 */
    .u-input {
        background: transparent !important;
        border-radius: 8rpx !important;
        padding-left: 60rpx !important;

        &::placeholder {
            color: #999 !important;
        }
    }
</style>